﻿@using WooCoo.Portal.Contracts
@{
    ViewBag.Title = "title";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


@section scripts{
    @Scripts.Render("~/Support/Models/resource.js")
    <script type="text/javascript">
        using("lookup", easyuifix.datagrid_editor_extend);
        ko.bindingViewModel(new viewModel());
        using(['validatebox', 'combotree', 'numberspinner'], easyuifix.datagrid_editor_extend);
        var formatterParent = function (value, row) { return row.ParentName };
        var formatterButton = function (value, row) { return (row.URL && row.URL != '#') ? '<a href="#" onclick="setButton(\'' + row.MenuCode + '\')"><span class="icon icon-set2">&nbsp;</span>[设置按钮]</a>' : ''; };
    </script>
}
<div class="z-toolbar">
    <a id="a_refresh" href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a>
    <a id="a_add" href="#" plain="true" class="easyui-linkbutton" icon="icon-add" title="新增" data-bind="click:addClick">新增</a>
    <a id="a_edit" href="#" plain="true" class="easyui-linkbutton" icon="icon-edit" data-bind="click:editClick" title="编辑">编辑</a>
    <a id="a_del" href="#" plain="true" class="easyui-linkbutton" icon="icon-cross" title="删除" data-bind="click:deleteClick">删除</a>
    <a id="a_save" href="#" plain="true" class="easyui-linkbutton" icon="icon-save" data-bind="click:saveClick" title="保存">保存</a>
</div>

<table id="gridlist" data-bind="treegrid:grid">
    <thead>
        <tr>
            <th field="_id" hidden="true"></th>
            <th field="MenuName" align="left" width="150" editor="{type:'validatebox',options:{required: true }}">菜单名称   </th>
            <th field="MenuCode" align="left" width="80" editor="{type:'validatebox',options:{required: true }}">编码   </th>
            <th field="ParentCode" align="left" width="150" editor="combotree" formatter="formatterParent">上级菜单   </th>
            <th field="IconClass" align="left" width="180" editor="{type:'lookup'}">图标     </th>
            <th field="URL" align="left" width="180" editor="text">链接地址   </th>
            <th field="IsVisible" align="center" width="60" editor="{type: 'checkbox',options: {on: 1,off: 0}}" formatter="com.formatCheckbox">是否可见</th>
            <th field="IsEnable" align="center" width="60" editor="{type: 'checkbox',options: {on: 1,off: 0}}" formatter="com.formatCheckbox">是否启用</th>
            <th field="MenuSeq" align="right" width="50" editor="text">排序</th>
            <th field="Button" align="center" width="100" formatter="formatterButton">页面按钮 </th>
        </tr>
    </thead>
</table>


<script type="text/html" id="button-template">
    <div style="margin:5px;height:320px;overflow:auto;">
        <style type="text/css">
            .listview {
                margin: 0 !important;
            }

                .listview li {
                    width: 100px !important;
                    background-color: #ECECFF !important;
                    float: left;
                    margin: 3px;
                    overflow: hidden;
                }

                .listview span {
                    font-size: 14px !important;
                    height: auto !important;
                    white-space: nowrap;
                }

                .listview .icon:before {
                    content: "" !important;
                }
        </style>

        <div style="border-bottom:1px solid #CCC; margin-bottom:5px;">
            <span class="icon32 icon-settings32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;">请选择页面按钮</span>
        </div>

        <div class="metrouicss">
            <label class="input-control checkbox" style="margin-top:6px;margin-left:3px;">
                <input type="checkbox" data-bind="checked:checkAll"><span class="helper">全选</span>
            </label>
            <button class="image-button standart fg-color-white" style="float:right" data-bind="click:manageClick">
                <i class="icon-grid-view bg-color-green"></i>
                管理按钮库
            </button>
            <ul class="listview" data-bind="foreach: buttons" style="clear:both">
                <li data-bind="click:$parent.buttonClick,css:{selected:Selected()>0}"><span class="icon" data-bind="text:ButtonName,css:ButtonIcon"></span></li>
            </ul>
        </div>

    </div>
    <div style="text-align:center;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)">确定</a>
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a>
    </div>
</script>

<script type="text/html" id="manage-template">
    <style type="text/css">
        .datagrid-wrap {
            border-width: 0 0 1px 0;
        }

        .datagrid-toolbar {
            background-color: #E0ECFF !important;
        }
    </style>

    <table data-bind="datagrid:grid">
        <thead>
        <th field="ButtonCode" align="left" editor="{type:'validatebox',options:{required:true}}" width="80">编码   </th>
        <th field="ButtonName" align="left" editor="{type:'validatebox',options:{required:true}}" width="70">名称   </th>
        <th field="ButtonIcon" align="left" editor="{type:'validatebox',options:{required:true}}" width="120">图标   </th>
        <th field="ButtonSeq" align="left" editor="text" width="50">排序   </th>
        <th field="Description" align="left" editor="text" width="200">备注说明   </th>
        </thead>
    </table>

    <div style="text-align:center;margin:5px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)">确定</a>
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a>
    </div>
</script> 
